<template>
	<view class="cell" :border="border">
		<slot name="iconL">
			<uni-icons v-if="iconL" class="icon" :type="iconL"
				:size="iSizeL" :color="iColorL" />
		</slot>
		<slot name="label">
			<text txt :style="lStyle">{{label}}</text>
		</slot>
		<slot name="iconR">
			<uni-icons v-if="iconR" class="right" :type="iconR"
				:size="iSizeR" :color="iColorR" />
		</slot>
	</view>
</template>

<script>
	export default {
		props: {
			iconL: String, // left-Icon
			iconR: String, // rigth-Icon
			iSizeL: { // left-Icon 大小
				type: String,
				default: '16'
			},
			iSizeR: { // rigth-Icon 大小
				type: String,
				default: '10'
			},
			iColorL: { // left-Icon 颜色
				type: String,
				default: '#8f8f94'
			},
			iColorR: { // rigth-Icon 颜色
				type: String,
				default: '#333'
			},
			border: { // 边框
				type: [String,Boolean],
				default: 'bottom'
			},
			label: String, // 文本
			lStyle: String // 文本样式
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
// 块
.cell{
	background-color: #fff;
	padding: 20rpx;
	&[border=top]{border-top: 2rpx solid #e4e4e4;}
	&[border=right]{border-right: 2rpx solid #e4e4e4;}
	&[border=bottom]{border-bottom: 2rpx solid #e4e4e4;}
	&[border=left]{border-left: 2rpx solid #e4e4e4;}
	&[border=true]{border: 2rpx solid #e4e4e4;}
	
	.icon{margin-right: 20rpx;}
	[txt]{font-size: 24rpx;}
	.right{float: right;margin-top: 10rpx;font-weight: bold;}
}
</style>
